<script setup lang="ts">
import { ref } from "vue";

const activeIndex = ref(0);
const recommendClick = () => {
  uni.showToast({
    title: "功能正在开发中",
    icon: "error" || "fail",
  });
};
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="true" :interval="3000">
      <swiper-item>
        <navigator
          url="/pages/list/index"
          hover-class="none"
          open-type="switchTab"
          class="navigator"
        >
          <image
            mode="scaleToFill"
            class="image"
            src="https://www.kimhiz.asia/uploads/banner1.png"
          ></image>
        </navigator>
      </swiper-item>
      <swiper-item>
        <navigator
          url="/pagesMember/recommendData/recommendData"
          open-type="navigate"
          class="navigator"
        >
          <image
            mode="scaleToFill"
            class="image"
            src="https://www.kimhiz.asia/uploads/banner2.png"
          ></image>
        </navigator>
      </swiper-item>
      <swiper-item>
        <navigator
          url="/pages/comment/index"
          open-type="switchTab"
          hover-class="none"
          class="navigator"
        >
          <image
            mode="scaleToFill"
            class="image"
            src="https://www.kimhiz.asia/uploads/banner3.png"
          ></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in 3"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
:host {
  display: block;
  height: 280rpx;
}
/* 轮播图 */
.carousel {
  height: 100%;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}
</style>
